<template>
  <div>
    <div class="rankpan" style="width: 130rem;height: 60rem;margin-left: auto;margin-right: auto;">
      <!-- 左边菜单 -->
      <div style="width: 15rem;background-color: antiquewhite;float: left;position: fixed;">
        <!-- 热门课程 -->
        <div style="width: 15rem;">
          <div style="width: 15rem;">
            <div style="width: 5rem;height: 3rem;float: left;">
              <img src="../../assets/img/remen.png" style="width: 5rem;height: 3rem;"/>
            </div>
            <div style="width: 10rem;height: 3rem;float: left;">
              <div style="margin-left: auto;margin-right: auto;;margin-top: 1rem;"><span style="font-weight: bolder">热门课程</span></div>
            </div>
          </div>

          <!-- 选项 -->
          <div style="width: 10rem;margin-left: auto;margin-right: auto;">
            <div style="width: 1.5rem;float: left;height: 3rem;">
              <i v-if="selectflag=='热门课程'" class="el-icon-caret-right" style="color: #DAA520;margin-top: 1.1rem"></i>
            </div>
            <div style="width: 8.5rem;float: left;height: 3rem;">
              <el-button @click="selectyouzhiitme('热门课程')" style="color: #7F828B;" type="text" size="medium">热门课程</el-button>
            </div>
          </div>


        </div>
        <!-- 优质课程 -->
        <div style="width: 15rem;margin-top: 4rem;">
          <div style="width: 15rem;">
            <div style="width: 5rem;height: 3rem;float: left;">
              <img src="../../assets/img/youzhi.png" style="width: 5rem;height: 3rem;"/>
            </div>
            <div style="width: 10rem;height: 3rem;float: left;">
              <div style="margin-left: auto;margin-right: auto;;margin-top: 1rem;"><span style="font-weight: bolder">优质课程</span></div>
            </div>
          </div>
          <!-- 选项 -->
          <div v-for="subject in genres" style="width: 10rem;margin-left: auto;margin-right: auto;">
            <div style="width: 1.5rem;float: left;height: 3rem;">
              <i v-if="selectflag==subject" class="el-icon-caret-right" style="color: #DAA520;margin-top: 1.1rem"></i>
            </div>
            <div style="width: 8.5rem;float: left;height: 3rem;">
              <el-button @click="selectyouzhiitme(subject)" style="color: #7F828B;" type="text" size="medium">{{subject}}</el-button>
            </div>
          </div>

        </div>
      </div>
      <!-- 右边内容 -->
      <div style="width: 115rem;float: left;margin-left: 15rem;">
        <!-- 热门课程 -->
        <div v-if="selectflag=='热门课程'">
          <div v-for="course in eduCourses" style="width: 23rem;height: 23rem;display: inline-table;">
            <div @click="tocourse(course.id)" class="coursepan" style="widtih: 22rem;height: 22rem;margin-left: 1rem;">
              <!-- 课程图片 -->
              <div style="height: 0.5rem;width: 22rem;"></div>
              <div style="width: 20rem;height: 11rem;margin-left: 1rem;">
                <img class="courseimgpan" :src="course.cover" style="width: 20rem;height: 11rem;"/>
              </div>
              <!-- 课程文字内容 -->
              <div style="width: 20rem;height: 5rem;margin-left: 1rem;">
                <span style="font-weight: bolder;">{{course.title}}</span>
              </div>
              <div style="width: 20rem;height: 5rem;margin-left: 1rem;">
                <div style="width: 20rem;height: 2rem;">
                  <!-- <span style="font-size: small;color: orange;">报名人数:{{course.usercount}}</span> -->
                  <span v-if="course.price!=0" style="font-size: small;color: orange;float: right;">{{course.price}}￥</span>
                </div>
                <div style="width: 20rem;font-size: 11px;height: 2rem;margin-top: 1rem;">
                  <span v-if="course.courseStarttime==null">永久开课</span>
                  <span v-if="course.courseStarttime!=null">开课时间:  {{course.courseStarttime}}~</span><span v-if="course.courseEndtime!=null">{{course.courseEndtime}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 优质课程 -->
        <div v-if="selectflag!='热门课程'">
          <div v-for="course in eduCourses" style="width: 23rem;height: 23rem;display: inline-table;">
            <div @click="tocourse(course.id)" class="coursepan" style="widtih: 22rem;height: 22rem;margin-left: 1rem;">
              <!-- 课程图片 -->
              <div style="height: 0.5rem;width: 22rem;"></div>
              <div style="width: 20rem;height: 11rem;margin-left: 1rem;">
                <img class="courseimgpan" :src="course.cover" style="width: 20rem;height: 11rem;"/>
              </div>
              <!-- 课程文字内容 -->
              <div style="width: 20rem;height: 5rem;margin-left: 1rem;">
                <span style="font-weight: bolder;">{{course.title}}</span>
              </div>
              <div style="width: 20rem;height: 5rem;margin-left: 1rem;">
                <div style="width: 20rem;height: 2rem;">
                  <!-- <span style="font-size: small;color: orange;">报名人数:{{course.usercount}}</span> -->
                  <span v-if="course.price!=0" style="font-size: small;color: orange;float: right;">{{course.price}}￥</span>
                </div>
                <div style="width: 20rem;font-size: 11px;height: 2rem;margin-top: 1rem;">
                  <span v-if="course.courseStarttime==null">永久开课</span>
                  <span v-if="course.courseStarttime!=null">开课时间:  {{course.courseStarttime}}~</span><span v-if="course.courseEndtime!=null">{{course.courseEndtime}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import bigdata from '@/api/bigdata/bigdata'
  export default {
      data () {
        return {
         //游标
         selectflag: '热门课程',
         eduCourses: [],
         genres: []
        };
      },
      methods:{
        //优质课程 点击选中
        selectyouzhiitme(subjectone){
          this.selectflag=subjectone
          if(subjectone==='热门课程'){
            bigdata.getyouzhicourses().then(response => {
              this.eduCourses=response.data.data.eduCourses
            })
          }else{
            bigdata.getcoursetop10bygenres(subjectone).then(response => {
              this.eduCourses=response.data.data.eduCourses
            })
          }

        },
        //获取优质课程菜单参数
        getgenresu(){
          bigdata.getgenresxx().then(response => {
            this.genres=response.data.data.genres
            console.log('测试：',response)
          })
        },
        //页面跳转
          tocourse(id){
           let newtarg=this.$router.resolve({
             path: '/course/'+id,
           })
           window.open(newtarg.href, '_blank');
          }


      },

      created(){
        // 获取优质课程菜单参数
        this.getgenresu()
        this.selectyouzhiitme('热门课程')

      }
    }
</script>

<style>
  .g1:hover{
    color: burlywood;
  }
  .rankpan{
    background-image: linear-gradient(to top, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%);
  }
  .coursepan{
   background-image: linear-gradient(-225deg, #CBBACC 0%, #2580B3 100%);
   border-radius: 5px;
  }
  .courseimgpan:hover{
    transform: rotateY(360deg);
      -webkit-transform: rotateY(360deg);
      -moz-transform: rotateY(360deg);
      -o-transform: rotateY(360deg);
      -ms-transform: rotateY(360deg);
      transform-style: preserve-3d;
      transition: all 1.5s;
  }
</style>
